<template>
  <q-dialog
    square
    no-backdrop-dismiss
    position="standard"
    v-model="sqlSqlparamDialogVisible"
    @hide="$emit('handleFinish')"
  >
    <q-card style="width: 800px; max-width: 80vw">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">
          {{ row.sql_code + $t("Relate") + $t("Sqlparam") }}
        </div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-separator />

      <q-card-section>
        <div class="justify-between row" style="width: 100%">
          <q-btn color="negative" @click="handleClear">
            {{ $t("Clear") + $t("All") }}
          </q-btn>
          <q-btn color="negative" @click="handleAll">
            {{ $t("Select") + $t("All") }}
          </q-btn>
          <q-btn color="primary" @click="handleSqlSqlparam">
            {{ $t("Save") }}
          </q-btn>
        </div>
      </q-card-section>

      <q-card-section style="width: 100%; max-height: 70vh" class="scroll">
        <q-tree
          dense
          style="width: 100%"
          :nodes="sqlparamTree"
          node-key="sqlparam_code"
          label-key="sqlparam_code"
          selected-color="primary"
          v-if="sqlparamTree.length !== 0"
          tick-strategy="strict"
          v-model:ticked="ticked"
        >
          <template v-slot:default-header="prop">
            <div class="items-center row">
              <div>
                {{ $t(prop.node.sqlparam_name) }}
              </div>
            </div>
          </template>
        </q-tree>
        <!-- <div>{{ ticked }}</div> -->
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import useTableData from "src/composables/useTableData";
import { useQuasar } from "quasar";
import { postAction } from "src/utils/requestAction";
import { computed, onMounted, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { DictOptions } from "src/utils/dict";
import { FormatDateTime } from "src/utils/date";
import { ArrayToTree } from "src/utils/arrayAndTree";
import { usePermissionStore } from "src/stores/permission";
import { useRouter } from "vue-router";

const $q = useQuasar();
const { t } = useI18n();
const router = useRouter();
const permissionStore = usePermissionStore();
const url = {
  list: "sqlparam/get-sqlparam-list",
  sqlSqlparamList: "sql-sqlparam/get-sql-sqlparam-list",
  sqlSqlparamEdit: "sql-sqlparam/edit-sql-sqlparam",
};

const sqlSqlparamDialogVisible = ref(false);
const row = ref({});
const show = (record) => {
  row.value = record;
  sqlSqlparamDialogVisible.value = true;

  pagination.value.rowsPerPage = 99999;
  getTableData();
  getsqlSqlparamList();
};
defineExpose({
  show,
});

const { pagination, loading, tableData, getTableData } = useTableData(url);

const ticked = ref([]);
const expandedKeys = ref([]);

const getsqlSqlparamList = () => {
  // 每次获取前，清空ticked
  ticked.value = [];
  postAction(url.sqlSqlparamList, {
    sql_code: row.value.sql_code,
  }).then((res) => {
    if (res.code === 1) {
      res.data.records.forEach((item) => {
        // 将有权限的菜单勾选上
        ticked.value.push(item.sqlparam_code);
      });
    }
  });
};

const handleSqlSqlparam = () => {
  const sqlparamCode = [];
  for (let i of ticked.value) {
    sqlparamCode.push(i);
  }
  postAction(url.sqlSqlparamEdit, {
    sql_code: row.value.sql_code,
    sqlparam_code: sqlparamCode,
  }).then((res) => {
    if (res.code === 1) {
      $q.notify({
        type: "positive",
        message: res.message,
      });
      getsqlSqlparamList();
    }
  });
};

const sqlparamTree = computed(() => {
  if (tableData.value.length !== 0) {
    return tableData.value;
  }
  return [];
});

const handleClear = () => {
  ticked.value = [];
};
const handleAll = () => {
  tableData.value.forEach((item) => {
    ticked.value.push(item.sqlparam_code);
  });
};
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "SqlSqlparamDialog",
});
</script>
